<template>
    <!-- 往届学员 -->
    <div>
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item> <em class="el-icon-lx-calendar"></em>管理员操作 </el-breadcrumb-item>
                <a src="#"></a>
            </el-breadcrumb>
        </div>
        <div class="container" v-if="addformVisible">
            <!-- 添加管理员按钮 -->
            <el-button type="danger" @click="addmanager" class="addbtn">添加管理员</el-button>
            <!-- 表格 -->
            <el-table
                v-loading="loading"
                element-loading-text="拼命加载中"
                element-loading-spinner="el-icon-loading"
                element-loading-background="rgba(50,65,87)"
                :data="tableData"
                border
                stripe
                height="420"
                class="table"
                ref="multipleTable"
                header-cell-class-name="table-header"
            >
                <el-table-column prop="logo" label="头像" align="center">
                    <template slot-scope="scope">
                        <div @click="priviewopen(baseUrl + scope.row.logo)">
                            <el-avatar shape="square" :size="52" fit="scale-down" :src="baseUrl + scope.row.logo" :key="baseUrl + scope.row.logo"></el-avatar>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column prop="username" label="账户名" width="150" align="center"></el-table-column>
                <el-table-column prop="password" label="登录密码" align="center"></el-table-column>
                <el-table-column prop="realname" label="姓名" align="center"></el-table-column>
                <el-table-column prop="power" label="职位" align="center">
                    <template slot-scope="scope">
                        {{ scope.row.power == -1 ? '班主任' : scope.row.power == 0 ? '管理员' : '其他' }}
                    </template>
                </el-table-column>
                <el-table-column label="操作" width="160" align="center">
                    <template slot-scope="scope">
                        <el-button type="danger" plain icon="el-icon-delete" @click="deletebtn(scope.$index, scope.row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <!-- 分页 -->
            <div class="pagination" v-if="pageTotal != 0">
                <el-pagination
                    background
                    layout="total, prev, pager, next"
                    :current-page="query.pageIndex"
                    :page-size="query.pageSize"
                    :total="pageTotal"
                    @current-change="handlePageChange"
                ></el-pagination>
            </div>
            <div v-if="priviewVisible" class="imgpreview">
                <img :src="logoImageUrl" alt="加载失败" @click="priviewshutup" :onerror="logoerror" />
            </div>
        </div>
        <!-- 添加管理员组件 -->
        <addmanager v-if="!addformVisible" @addback="addback"></addmanager>
        <!-- 删除管理员 -->
    </div>
</template>

<script>
import failedimg from '../../assets/img/failed.jpg';
import addmanager from '../CrmBaby/AddManager';
import { countmanager, findallmanager, deletemanager } from '../../api/index';
export default {
    name: 'nb',
    components: {
        addmanager
    },
    beforeRouteEnter(to, from, next) {
        next((vm) => {
            // if (vm.once) {
            //     vm.findManager();
            // }
        });
    },
    mounted: function () {
        this.findManager();
        this.once = true;
        this.logoerror = "onerror=null;src='" + failedimg + "'";
    },
    data() {
        return {
            baseUrl: 'http://192.168.2.225:8080/com.huidian.rem/build/',
            query: {
                pageIndex: 1,
                pageSize: 5
            },
            pageTotal: 0,
            tableData: [],
            priviewVisible: false,
            logoImageUrl: '',
            logoerror: '',
            addformVisible: true, //控制显示添加管理员组件
            loading: true, //加载开关
            findCount: true, //是否查询总条数
            once: false
        };
    },
    methods: {
        /**
         * 添加按钮事件
         */
        addmanager() {
            var that = this;
            that.$confirm('管理员是登录系统的重要人员, 确认添加?', '警告', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            })
                .then(() => {
                    that.$message({
                        type: 'warning',
                        message: '正在执行添加操作'
                    });
                    that.addformVisible = false;
                })
                .catch(() => {
                    that.$message({
                        type: 'info',
                        message: '已取消添加'
                    });
                    that.addformVisible = true;
                });
        },
        priviewopen(url) {
            console.log(url);
            this.priviewVisible = true;
            this.logoImageUrl = url;
        },
        priviewshutup() {
            this.priviewVisible = false;
            this.logoImageUrl = '';
        },
        // 子组件监听事件，切换显示内容
        addback(status) {
            this.addformVisible = true;
            console.log(status);
            if (status) {
                this.findCount = true;
                this.findManager();
            }
        },
        /**
         * 分页导航
         */
        handlePageChange(val) {
            console.log('分页数：' + val);
            this.$set(this.query, 'pageIndex', val);
            this.findManager();
        },
        /**
         * 删除管理员
         */
        deletebtn(index, row) {
            var that = this;
            that.$confirm('此操作将永久删除该管理员信息, 是否继续?', '警告', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            })
                .then(() => {
                    let data = {
                        id: row.id
                    };
                    that.delete(data);
                })
                .catch((error) => {
                    console.log(error);
                    that.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
        },
        //   查询管理员信息
        findManager() {
            var that = this;
            that.loading = true;
            // 查询信息条数，分页
            // 减少查询次数
            if (this.findCount) {
                countmanager().then((res) => {
                    console.log(res);
                    that.pageTotal = res;
                });
            }
            this.findCount = false;
            // 查询对应页信息
            findallmanager(this.query).then((res) => {
                that.tableData = res;
                setTimeout(() => {
                    that.loading = false;
                }, 300);
            });
        },
        delete(data) {
            var that = this;
            console.log(1243);
            deletemanager(data).then((res) => {
                if (res > 0) {
                    that.$message({
                        type: 'success',
                        message: '删除成功!'
                    });
                    // 刷新页面数据
                    that.findCount = true;
                    that.query.pageIndex = 1
                    that.findManager();
                } else {
                    that.$message({
                        type: 'warning',
                        message: '删除失败!'
                    });
                }
            });
        }
    }
};
</script>

<style scoped>
.addbtn {
    position: relative;
    left: 100%;
    transform: translateX(-100%);
    margin-bottom: 1rem;
}
/* 图片预览的样式 */
.imgpreview {
    z-index: 10;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
</style>